import React, { Component } from "react";
import { Button, Modal, Input, Radio, Select, Switch, TreeSelect, message, Icon } from "antd";
import { knowledgeTenantQaCategory, knowledgeImportAtlas } from "@/services/knowledgemanagement";
import styles from "../list/index.less";
const { TreeNode } = TreeSelect;

class ReferenceTemplate extends Component {
	constructor(props) {
		super(props);
		this.state = {
			initData: null,
			visible: false,
			categoryAtlasList: [],
			categoryAtlasValue: '',
			loading: false,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this)
		}
	}

	init = initData => {
		this.setState({ visible: true, initData }, () => this.getTreeList());
	}

	getTreeList = async () => {
		let res = await knowledgeTenantQaCategory();
		// console.log(res);
		this.setState({ categoryAtlasList: res.atlasCategory });
	}

	onCreate = () => {
		const { categoryAtlasValue, initData } = this.state;
		if (categoryAtlasValue === '') return initData?.type === 'classify' ? message.error('请选择知识库或者导图分类') : message.error('请选择导图分类');
		this.setState({ loading: true }, async () => {
			let obj = null;
			let res = { data: false, msg: '操作失败' };
			if (initData && initData.type !== 'classify') {
				obj = {
					templateAtlasIds: [initData.id],
					targetAtlasCategoryId: categoryAtlasValue,
				};
				res = await knowledgeImportAtlas(obj);
			} else {
				obj = {
					templateAtlasCategoryId: initData?.id,
					targetAtlasCategoryId: categoryAtlasValue,
				};
				res = await knowledgeImportAtlas(obj);
			};
			if (res?.data) {
				this.setState({ loading: false }, () => {
					this.onCancel();
					message.success('操作成功');
				})
			} else {
				this.setState({ loading: false });
			}
		})
	}

	onCancel = () => {
		this.setState({ initData: null, visible: false, categoryAtlasList: [], categoryAtlasValue: '' });
	}

	onAtlasChangeCategory = (value) => {
		// console.log(value);
		this.setState({ categoryAtlasValue: value });
	}

	renderTreeAtlas = (data) => {
		return data.map((item) => {
			if (item.atlasCategoryInfoArr) {
				return (
					<TreeNode
						title={item.qaCategoryName}
						key={item.qaCategoryId}
						value={item.qaCategoryId}
						id={item.qaCategoryId}
						disabled={this.state.initData?.type === 'classify' ? false : this.state.categoryAtlasList.map(i => i.qaCategoryId).indexOf(item.qaCategoryId) > -1}
					>
						{this.renderTreeAtlas(item.atlasCategoryInfoArr)}
					</TreeNode>
				);
			};
			return (
				<TreeNode
					title={item.qaCategoryName}
					key={item.qaCategoryId}
					value={item.qaCategoryId}
					id={item.qaCategoryId}
					disabled={this.state.initData?.type === 'classify' ? false : this.state.categoryAtlasList.map(i => i.qaCategoryId).indexOf(item.qaCategoryId) > -1}
				/>
			);
		});
	}

	render() {
		const { initData, visible, categoryAtlasList, loading } = this.state;
		const formItemLayout = {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 6 },
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 16 },
			},
		};

		return (
			<Modal
				visible={visible}
				title='引用知识导图'
				okText='确认'
				cancelText='取消'
				onCancel={this.onCancel}
				// onOk={this.onCreate}
				footer={[
					<Button type="primary" ghost onClick={this.onCancel}>取消</Button>,
					<Button type="primary" loading={loading} onClick={this.onCreate}>确定</Button>
				]}
				destroyOnClose
				width={720}
			>
				{initData?.type === 'classify' ? (
					<div style={{ marginBottom: 16 }} className={styles.referBgBox}>引用分类后，该分类下的所有导图将导入到下方选择的知识库中。</div>
				) : null}
				<div>
					<div style={{ display: 'flex', alignItems: 'center', paddingLeft: 16 }}>
						<label style={{ marginRight: 16 }}>知识导图分配目录</label>
						<TreeSelect
							style={{ width: "328px" }}
							dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
							placeholder='请选择知识导图分类'
							allowClear
							showCheckedStrategy='SHOW_PARENT'
							treeNodeFilterProp='title'
							onChange={this.onAtlasChangeCategory}
							suffixIcon={<Icon type="caret-down" />}
						>
							{this.renderTreeAtlas(categoryAtlasList)}
						</TreeSelect>
					</div>
					<div style={{ margin: '10px 0px 0px 156px', fontSize: '14px', color: 'red' }}>
						{categoryAtlasList.length > 0 ? null : (
							<div>当前知识中心还没有知识库，请创建后引用。</div>
						)}
					</div>
				</div>
			</Modal>
		);
	}
};

export default ReferenceTemplate;
